<template>
	<view>
		<image src="https://s1.ax1x.com/2020/10/14/04HRLF.png" mode="" class="background"></image>
		<view class="block"></view>
		<view class="icon" @click="returns()">
			<van-icon name="arrow-left" size="22px" color="#ffffff" />
		</view>
		<view class="shop_message">
			<view class="message">
				<image :src="img" mode=""></image>
				<view class="">
					<view class="name">{{name}}</view>
					<view class="time">
						<view class="">评分{{score}} |</view>
						<view class=""> 配送约{{time}}分钟</view>
					</view>
				</view>
			</view>
			<view class="notice">公告：华莱士全鸡汉堡，全国一万家|全鸡配汉堡，华莱士吃好！</view>
			<view class="label">
				<view class="">{{label}}</view>
				<view class="">{{label_one}}</view>
				<view class="">{{label_two}}</view>
				<view class="">{{label_three}}</view>
			</view>
		</view>
		<!-- 标签页 -->
		<view class="" style="margin-top: 100px;">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="" v-if="current ==0">
			<view class="content">
				<scroll-view class="menu-wrapper" scroll-y :style="'height:'+height+'px'">
					<view ref="menuWrapper">
						<!--  :class="{'current': currentIndex == index}" @click="selectMenu(index,$event)" -->
						<view style="position: relative;" v-for="(item,index) in goods" :key="index" ref="menuList" @click="select(index)"
						 :class="{'current': currentIndex == index}">

							<view class="menu-item">{{item.name}}</view>
							<text class="allcount" v-if="getAllCount>=item.count&&item.count>0">{{item.count}}</text>
							<!-- <text class="allcount">1</text> -->
						</view>
					</view>
				</scroll-view>
				<!--  @scroll="scroll" -->
				<scroll-view class="foods-wrapper" scroll-y :style="'height:'+height+'px'" :scroll-top="foodSTop">
					<view ref="foodsWrapper">
						<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">

							<view class="food-title" style="background: #f3f5f7">
								{{item.name}}
							</view>
							<view class="food" v-for="(food, index) in item.foods" :key="index">
								<image :src="food.img" mode="" style="width: 75px;height: 75px;margin-top: 6px;"></image>
								<view class="food-info">
									<text style="font-size: 15px;margin-top: 2px;">{{food.name}}</text>
									<text style="font-size: 13px;margin: 2px 0;">{{food.description}}</text>
									<text style="font-size: 13px;margin: 2px 0 4px;">月售{{food.sellCount}}</text>

									<!-- 加减 -->
									<view class="food-btm">
										<text class="food-price">￥{{food.price}}</text>
										<cartcontrol :food="food" @add="addCart" @dec="decreaseCart"></cartcontrol>

									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<shopcart :goods="goods" @add="addCart" @dec="decreaseCart" @delAll="delAll"></shopcart>
			</view>
		</view>
		<view class="set" v-if="current ==1">
			<view class="menu">
				<view class="">折扣</view>
				<view class="">全部</view>
			    <view class="">满28减20</view>	
				<view class="">满45减30</view>
			</view>
			<view class="hamburger" v-for="(item,index) in set">
				<view class="hamburger_title">{{item.title}}</view>
				<view class="hamburger_view">
					<image :src="item.img" mode=""></image>
					<view class="hamburger_name">{{item.name}}</view>
				</view>
				<view class="hamburger_view">
					<view class="hamburger_price">折扣价<text>￥{{item.price}}</text></view>
					<button type="default">立即购买</button>
				</view>
			</view>
		</view>
		<view class="" v-if="current ==2">
			<image src="https://s1.ax1x.com/2020/10/15/0TJD0J.png" mode="" style="width: 100%;height: 100px;"></image>
			<view class="evaluate_text">
				<view class="" v-for="(item,index) in evaluate">{{item.txt}}</view>
			</view>
			<view class="evaluate_list"></view>
			<view class="bottom">
				<view class="comment"v-for="(item,index) in comment">
				<view class="comment_view">
					<image :src="item.img" mode=""></image>
					<view class="comment_name">{{item.name}}</view>
					<view class="comment_time">{{item.time}}</view>
				</view>
				<view class="comment_content">{{item.content}}</view>
				
			</view>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	import shopcart from '@/components/shopcart.vue';
	import cartcontrol from '@/components/cartcontrol.vue'
	import Vue from 'vue'
	import json from '../../json.js';
	export default {
		data() {
			return {
				list: [{
					name: '点菜'
				}, {
					name: '套餐'
				}, {
					name: '评价',
				}],
				current: 0,
				img: null,
				name: null,
				score: null,
				time: null,
				label: null,
				label_one: null,
				label_two: null,
				label_three: null,
				goods:null,
				height: 0,
				foodSTop: 0,
				currentIndex: 0,
				set:null,
				evaluate:null,
				comment:null
			}
		},
		methods: {
			returns() {
				uni.navigateBack({

				})
			},
			change(index) {
				this.current = index;
			},
			// 点击侧边栏
			select(index) {
				this.currentIndex = index;
				this.setScrollH(index);

			},

			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				// console.log('query',query);
				let foods = query.selectAll('.foods');
				// console.log('foods', foods);

				this.$nextTick(function() {
					foods.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.foodSTop = 0;
						}
						for (let i = 0; i < index; i++) {

							height += parseInt(data[i].height);
							// console.log('fh', foods);
							that.foodSTop = height;
							// console.log(that.foodSTop)
						}

					}).exec();
				})

			},

			addCart: function(item) {
				// console.log('ev', JSON.stringify(item))
				if (item.count >= 0) {
					item.count++
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
						})
					})
					// console.log('c++', JSON.stringify(item))

				} else {
					console.log('add')
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								Vue.set(food, 'count', 1)
							// food.count = 1
							// console.log('add-shop', JSON.stringify(food))
						})
					})
				}

			},
			decreaseCart(item) {
				if (item.count) {
					item.count--
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
							// console.log('dec-shop', JSON.stringify(this.foods))
						})
					})
				}
			},
			// 清空购物车
			delAll() {
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							food.count = 0
							// console.log(JSON.stringify(food));
						}
					})
				})
			}
		},
		onLoad(option) {
			this.height = Number(uni.getSystemInfoSync().windowHeight) - 55;
			this.img = option.img;
			this.name = option.name;
			this.score = option.score;
			this.time = option.time;
			this.label = option.label;
			this.label_one = option.label_one;
			this.label_two = option.label_two;
			this.label_three = option.label_three;
			this.goods = json.goods;
			this.set = json.set;
			this.evaluate = json.evaluate;
			this.comment = json.comment;
			console.log(this.img);
			console.log(this.name);
			console.log(this.score);
			console.log(this.time);
			console.log(this.label);
			console.log(this.label_one);
			console.log(this.label_two);
			console.log(this.label_three);
		},
		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {

					good.foods.forEach((food) => {

						if (food.count) {
							result.push(food)
						}
					})
				})
				// console.log('result', result);
				return result

			},
			// 获得购物车所有商品数量
			getAllCount: function(item) {
				// console.log('item', item)
				let result = [];
				let count = 0;

				for (let i = 0; i < this.goods.length; i++) {
					count = 0;
					this.goods[i].foods.forEach((food) => {

						// console.log('food',food);
						if (food.count >= 0) {
							count += food.count
							Vue.set(this.goods[i], 'count', count)
						}
					})
					// console.log('result', count);
					result.push(count)
				}

				result.sort(function(a, b) {
					return a - b;
				})
				count = result[result.length - 1]
				// console.log('result', count);
				return count;
			},

		},
		components: {
			shopcart,
			cartcontrol
		},
	}
</script>

<style>
	.background {
		width: 100%;
		height: 110px;
	}

	.block {
		width: 100%;
		height: 110px;
		background-color: #000000;
		opacity: 0.4;
		position: absolute;
		top: 0;
	}

	.icon {
		position: fixed;
		top: 30px;
		left: 20px;
	}

	.message {
		display: flex;
		justify-content: start;
	}

	.message image {
		width: 25%;
		height: 70px;
	}

	.time {
		display: flex;
		justify-content: start;
		font-size: 13px;
	}

	.name {
		font-size: 20px;
		padding-top: 10px;
	}

	.notice {
		font-size: 12px;
		color: #999999;
		text-align: center;
	}

	.label {
		display: flex;
		justify-content: start;
		background-color: #fafafa;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-top: 10px;
	}

	.label view {
		font-size: 13px;
		color: red;
		margin-left: 5px;
		border: 1px solid red;
	}

	.shop_message {
		width: 95%;
		margin-left: 2.5%;
		box-shadow: #D5D4D9 3px 3px 3px;
		border-radius: 15px;
		overflow: hidden;
		margin-top: -50px;
		z-index: 9;
		background-color: #FFFFFF;
		position: absolute;
	}

	.tab {
		margin-top: 80px;
	}

	/* 购物车 */
	.content {
		display: flex;
		/* position: absolute; */
		top: 250px;
		bottom: 55px;
		width: 100%;
		overflow: hidden;
	}

	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: #00A0DC;
	}

	.menu-wrapper {
		text-align: center;
		width: 22%;
		display: flex;
		flex-direction: column;
		background: #f3f5f7;

	}

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
	}

	.allcount {
		position: absolute;
		right: 6px;
		top: 8px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.foods-wrapper {
		margin-left: 4px;
		width: 78%;
		margin-bottom: 70px;
	}

	.food,
	.food-btm,
	.content {
		display: flex;
		flex-direction: row;
	}

	.food-title {
		padding: 2px 0;
	}

	.food-info {
		margin-left: 10px;
		margin-right: 16px;
		display: flex;
		flex-direction: column;
		flex: 2;
	}

	.food-btm {
		justify-content: space-between;

	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}




	.head {
		/* position: relative;
		margin-top: -300rpx; */
	}

	.back image {
		width: 100%;
		height: 25vh;
		filter: blur(5px);
	}

	.contents {
		width: 90%;
		height: 300rpx;
		border-radius: 18px;
		background-color: #FFFFFF;
		box-shadow: #C8C9CC 5px 5px 5px;
		margin-left: 5%;
		margin-top: -250rpx;
		position: absolute;
	}

	.all {
		display: flex;
		justify-content: space-between;
	}

	.shop_name {
		font-size: 22px;
		padding: 20rpx;
	}

	.shop_text {
		margin-top: -60rpx;
		padding: 20rpx;
	}

	.shop_head image {
		width: 10vh;
		height: 10vh;
		padding-right: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.kong {
		width: 100%;
		height: 60rpx;
	}

	.dis {
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
	}

	.dis_left {
		width: 270rpx;
		height: 40rpx;
		border: #DD6161 1px solid;
		color: #DD6161;
		margin-right: 160rpx;
	}
	.menu{
		display: flex;
		padding-top: 15px;
		justify-content: space-around;
	}
	.set{
		background-color: #fbfbfb;
		width: 100%;
	}
	.menu view{
		background-color: #fef2e5;
		color: #ffba65;
		padding: 3px;
	}
	.hamburger{
		width: 95%;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		border-radius: 15px;
		margin-top: 15px;
		padding-bottom: 20px;
	}
	.hamburger_view{
		display: flex;
		justify-content: start;
	}
	.hamburger_title{
		color: #808080;
		padding-top: 5px;
		padding-left: 5px;
	}
	.hamburger image{
		width: 150px;
		height: 150px;
	}
	.hamburger_name{
		font-size: 18px;
	}
	.hamburger button{
		background-color: #ffd256;
	}
	.hamburger_price{
		text-align: right;
		width: 60%;
		padding-top: 15px;
	}
	.hamburger text{
		color: red;
		font-size: 18px;
	}
	.evaluate_text view{
		border: 0.5px solid #bababa;
		width: 105px;
		text-align: center;
		float: left;
		margin-top: 3px;
		margin-left: 3px;
	}
	.evaluate_text{
		margin-top: 15px;
		width: 87%;
		margin-left: 7%;
	}
	.evaluate_list{
		background-color: #f4f4f4;
		width: 100%;
		height: 10px;
		clear: both;
		margin-top: 110px;
		position: absolute;
	}
	.comment_view{
		display: flex;
		justify-content: space-around;
	}
	.comment image{
		width: 50px;
		height: 50px;
	}
	.bottom{
		margin-top: 120px;
		clear: both;
		position: absolute;
	}
	.comment{
		width: 95%;
		margin-left: 2.5%;
		margin-top: 20px;
		border-bottom: 1px solid #909399;
		padding-bottom: 10px;
	}
	.comment_name{
		font-size: 18px;
		margin-left: -35px;
		padding-top: 13px;
	}
	.comment_time{
		color: #909399;
	}
	.comment_content{
		width: 70%;
		margin-left: 20%;
	}
</style>
